<template>
  <div class="form-steps">
    <nav aria-label="Progress">
      <ol class="flex items-center">
        <li
          v-for="(step, index) in steps"
          :key="step.id"
          :class="[
            'relative',
            index !== steps.length - 1 ? 'pr-8 sm:pr-20' : ''
          ]"
        >
          <!-- 连接线 -->
          <div
            v-if="index !== steps.length - 1"
            class="absolute inset-0 flex items-center"
            aria-hidden="true"
          >
            <div
              :class="[
                'h-0.5 w-full',
                index < currentStepIndex ? 'bg-blue-600' : 'bg-gray-200'
              ]"
            />
          </div>
          
          <!-- 步骤圆圈 -->
          <div class="relative flex items-center justify-center">
            <div
              :class="[
                'flex h-8 w-8 items-center justify-center rounded-full border-2',
                getStepClass(index)
              ]"
            >
              <Icon
                v-if="index < currentStepIndex"
                name="Check"
                class="h-5 w-5 text-white"
              />
              <Icon
                v-else-if="index === currentStepIndex && loading"
                name="Loader"
                class="h-4 w-4 text-blue-600 animate-spin"
              />
              <span
                v-else
                :class="[
                  'text-sm font-medium',
                  index === currentStepIndex ? 'text-blue-600' : 'text-gray-500'
                ]"
              >
                {{ index + 1 }}
              </span>
            </div>
          </div>
          
          <!-- 步骤标题和描述 -->
          <div class="ml-4 min-w-0 flex-1">
            <div
              :class="[
                'text-sm font-medium',
                index <= currentStepIndex ? 'text-gray-900' : 'text-gray-500'
              ]"
            >
              {{ step.title }}
            </div>
            <div
              v-if="step.description"
              :class="[
                'text-sm',
                index <= currentStepIndex ? 'text-gray-500' : 'text-gray-400'
              ]"
            >
              {{ step.description }}
            </div>
          </div>
        </li>
      </ol>
    </nav>
    
    <!-- 步骤内容 -->
    <div class="mt-8">
      <div
        v-for="(step, index) in steps"
        :key="step.id"
        v-show="index === currentStepIndex"
        class="step-content"
      >
        <slot :name="`step-${step.id}`" :step="step" :index="index">
          <div class="text-center py-8 text-gray-500">
            步骤 {{ index + 1 }}: {{ step.title }}
          </div>
        </slot>
      </div>
    </div>
    
    <!-- 导航按钮 -->
    <div class="mt-8 flex justify-between">
      <button
        v-if="showBackButton && currentStepIndex > 0"
        type="button"
        :disabled="loading"
        class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
        @click="goToPreviousStep"
      >
        <Icon name="ArrowLeft" class="mr-2 h-4 w-4" />
        上一步
      </button>
      <div v-else></div>
      
      <button
        v-if="showNextButton && currentStepIndex < steps.length - 1"
        type="button"
        :disabled="loading || !canProceed"
        class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
        @click="goToNextStep"
      >
        下一步
        <Icon name="ArrowRight" class="ml-2 h-4 w-4" />
      </button>
      
      <button
        v-else-if="showFinishButton && currentStepIndex === steps.length - 1"
        type="button"
        :disabled="loading || !canFinish"
        class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed"
        @click="finish"
      >
        <Icon v-if="loading" name="Loader" class="mr-2 h-4 w-4 animate-spin" />
        <Icon v-else name="Check" class="mr-2 h-4 w-4" />
        完成
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import Icon from './Icon.vue'

export interface Step {
  id: string
  title: string
  description?: string
  optional?: boolean
}

interface Props {
  steps: Step[]
  currentStep: number
  loading?: boolean
  canProceed?: boolean
  canFinish?: boolean
  showBackButton?: boolean
  showNextButton?: boolean
  showFinishButton?: boolean
}

interface Emits {
  (e: 'update:currentStep', step: number): void
  (e: 'previous', step: number): void
  (e: 'next', step: number): void
  (e: 'finish'): void
  (e: 'step-change', step: number, stepData: Step): void
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  canProceed: true,
  canFinish: true,
  showBackButton: true,
  showNextButton: true,
  showFinishButton: true
})

const emit = defineEmits<Emits>()

const currentStepIndex = computed(() => props.currentStep)

const getStepClass = (index: number) => {
  if (index < currentStepIndex.value) {
    // 已完成步骤
    return 'border-blue-600 bg-blue-600'
  } else if (index === currentStepIndex.value) {
    // 当前步骤
    return 'border-blue-600 bg-white'
  } else {
    // 未完成步骤
    return 'border-gray-300 bg-white'
  }
}

const goToPreviousStep = () => {
  if (currentStepIndex.value > 0 && !props.loading) {
    const newStep = currentStepIndex.value - 1
    emit('update:currentStep', newStep)
    emit('previous', newStep)
    emit('step-change', newStep, props.steps[newStep])
  }
}

const goToNextStep = () => {
  if (currentStepIndex.value < props.steps.length - 1 && !props.loading && props.canProceed) {
    const newStep = currentStepIndex.value + 1
    emit('update:currentStep', newStep)
    emit('next', newStep)
    emit('step-change', newStep, props.steps[newStep])
  }
}

const finish = () => {
  if (!props.loading && props.canFinish) {
    emit('finish')
  }
}

// 暴露方法给父组件
defineExpose({
  goToPreviousStep,
  goToNextStep,
  finish,
  goToStep: (stepIndex: number) => {
    if (stepIndex >= 0 && stepIndex < props.steps.length && !props.loading) {
      emit('update:currentStep', stepIndex)
      emit('step-change', stepIndex, props.steps[stepIndex])
    }
  }
})
</script>

<style scoped>
.form-steps {
  @apply w-full;
}

.step-content {
  min-height: 200px;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}
</style>